import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Dropdown, Space, Avatar, message, Modal, Button, Checkbox, Form, Input, Drawer, Radio ,Switch} from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { UserOutlined, KeyOutlined, SettingOutlined, LoginOutlined,SaveOutlined } from '@ant-design/icons';
import { imgBaseUrl } from '../../../config/globle'

//下拉菜单数据
const items = [
    {
        key: '/profile',
        label: "个人中心",
        icon: <UserOutlined />
    },
    {
        key: 'change-pwd',
        label: "修改密码",
        icon: <KeyOutlined />
    },
    {
        key: 'sys-setting',
        label: "系统定制",
        icon: <SettingOutlined />
    },
    {
        key: 'logout',
        label: "退出登录",
        icon: <LoginOutlined />
    },
];


export default function HeaderDropdone() {
    const { avatar, username } = JSON.parse(localStorage.user);
    //修改密码
    const [isModalOpen, setIsModalOpen] = useState(false);
    //系统定制
    const [open, setOpen] = useState(false);
    const [placement, setPlacement] = useState('right');

    const navigate = useNavigate();
    function handleMenuClick({ key }) {
        console.log("点击", key);
        switch (key) {
            case "/profile":
                key = "/nav" + key;
                navigate("/nav/profile");
                break;
            case "change-pwd":
                showModal();
                break;
            case "sys-setting":
                showDrawer();
                break;
            case "logout":
                localStorage.clear();
                message.success("退出登录");
                navigate("/login");
                //清空用户信息
                break;
            default:
                break;
        }
    }

    const menuProps = {
        items,
        onClick: handleMenuClick,
    };
    //修改密码
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        setIsModalOpen(false);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    //系统定制
    const showDrawer = () => {
        setOpen(true);
    };
    const onChange = (e) => {
        setPlacement(e.target.value);
    };
    const onClose = () => {
        setOpen(false);
    };

    //


    //提交修改密码
    const onFinish = (values) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    const onChangeNext = () => {
        console.log(3333);
    };
    const onChangeLast = () => {
        console.log(7777);
    };

    return (
        <div>
            <Dropdown menu={menuProps} onclick={handleMenuClick}>
                <Space style={{ float: "right", marginTop: "-60px" }} >
                    <Avatar src={imgBaseUrl + "/" + avatar} />
                    {username}
                </Space>
            </Dropdown>
            <>
                <Modal title="修改密码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="旧密码"
                            name="oldPassword"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            label="新密码"
                            name="newPassword"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please input your password!',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            label="再次确认"
                            name="surePassword"
                            dependencies={["newPassword"]}
                            rules={[
                                {
                                    required: true,
                                    message: "请确认新密码!",
                                },
                                ({ getFieldValue }) => ({
                                    validator(rule, value) {
                                        if (!value || getFieldValue("newPassword") === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject("两次新密码不一致!");
                                    },
                                }),
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>
                    </Form>
                </Modal>
            </>
            <>
                <Drawer
                    placement={placement}
                    width={300}
                    onClose={onClose}
                    open={open}
                    extra={<></>}
                >
                    <p>导航栏颜色</p>
                    <p>主题颜色</p>
                    <p>导航栏位置</p>

                    <div>
                        <span>固定顶栏</span>
                        <Switch onChange={onChange} defaultChecked size={'small'} style={{float:"right"}}/>
                    </div>
                    <div >
                        <span>侧边栏固定</span>
                        <Switch onChange={onChangeNext} size={'small'} style={{float:"right"}}/>
                    </div>
                    <div>
                        <span>多页签模式</span>
                        <Switch onChange={onChangeLast} size={'small'} style={{float:"right"}}/>
                    </div>
                    <Button
                        style={{ width: "100%" ,marginTop:"100px"}}
                        icon={<SaveOutlined />}
                        onClick={showDrawer}
                    >
                        保存设置
                    </Button>
                </Drawer>
            </>
        </div >

    )
}
